<template>
    <div style="position: relative;height: 700px;">
        <div style="position: absolute; top: 0" id="luckysheet"></div>
    </div>
</template>
<script setup>
import { ref, onMounted, watch } from 'vue'
import LuckyExcel from 'luckyexcel'
const props = defineProps({
    file:{type:File}
})
watch(
    () => props.file,
    (newvalue, oldvalue) => {
        getInit()
    }, {
    deep: true
}
)
onMounted(()=>{
    getInit()
})
const getInit= ()=>{
    LuckyExcel.transformExcelToLucky(props.file, function (exportJson, luckysheetfile) {
        if (exportJson.sheets == null || exportJson.sheets.length == 0) {
            alert('不支持xls文件')
            return
        }
        window.luckysheet.destroy()
        window.luckysheet.create({
            container: 'luckysheet', //luckysheet is the container id
            showinfobar: false,
            showtoolbar:false,
            lang: 'zh',
            data: exportJson.sheets,
            title: exportJson.info.name,
            userInfo: exportJson.info.name.creator,
            // column: 20,
            // row: 20,
            allowUpdate: true,
        })
    })
}
</script>
<style  scoped>
#luckysheet {
    margin: 0px;
    padding: 0px;
    position: absolute;
    width: 100%;
    left: 0px;
    top: 30px;
    bottom: 0px;
}
</style>